<template>
  <div>
    <div class="zsy_main">
        <div class="selMain">
          <div class="sousuo">
            <select name="" id="">
              <option value="">某某镇</option>
              <option value="">某某镇</option>
              <option value="">某某镇</option>
              <option value="">某某镇</option>
              <option value="">某某镇</option>
            </select>
          </div>
          <div class="sousuo">
            <select name="" id="">
              <option value="">某某村</option>
              <option value="">某某村</option>
              <option value="">某某村</option>
              <option value="">某某村</option>
            </select>
          </div>
        </div>
        <div class="zsy_li_main">
          <div class="zsy_li" v-for="item in navBar">
            <div class="zsy_top">
              <img :src="item.ico" alt="" />
            </div>
            <div class="zsy_text">{{item.name}}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navBar: [{
        name:"环境",
        ico: require('assets/img/tyy/zs_li_img1.png')
      },{
        name:"资源",
        ico: require('assets/img/tyy/zs_li_img2.png')
      },{
        name:"种植",
        ico: require('assets/img/tyy/zs_li_img3.png')
      },{
        name:"养殖",
        ico: require('assets/img/tyy/zs_li_img4.png')
      },{
        name:"旅游",
        ico: require('assets/img/tyy/zs_li_img5.png')
      },{
        name:"加工",
        ico: require('assets/img/tyy/zs_li_img6.png')
      },{
        name:"能源",
        ico: require('assets/img/tyy/zs_li_img7.png')
      },{
        name:"医疗",
        ico: require('assets/img/tyy/zs_li_img8.png')
      },{
        name:"教育",
        ico: require('assets/img/tyy/zs_li_img9.png')
      },{
        name:"养老",
        ico: require('assets/img/tyy/zs_li_img10.png')
      },{
        name:"人口",
        ico: require('assets/img/tyy/zs_li_img11.png')
      },{
        name:"土地",
        ico: require('assets/img/tyy/zs_li_img12.png')
      }]
    };
  }
}
</script>
<style scoped lang="scss">
.zsy_main {
    width: 63.0625rem;
    height: 34.3125rem;
    background: url(~assets/img/tyy/zs_bg.png) no-repeat;
    background-size: 100% 100%;
    color: #389fdb;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12.1563rem;
    margin-left: -31.5313rem;
    .selMain {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -11rem;
      margin-top: -2.0315rem;
      display: flex;
      justify-content: space-between;
      .sousuo{
        margin: 0 1.25rem;
        select {
          background-color:rgba(0, 46, 115, 0.7);
          border: 0.0625rem solid #48c3ff;
          border-radius: 0.5rem;
          color: #fff;
          width: 10rem;
          height: 3.125rem;
          font-size: 1.375rem;
          text-align: center;
          option {
            font-size: 1rem;
          }
        }
      }
    }
  }

  .zsy_li {
    background: url(~assets/img/tyy/zs_li_img.png) no-repeat;
    text-align: center;
    position: absolute;
    width: 7.5rem;
    height: 6.875rem;
    background-size: 100% 100%;

    img {
      width: 3.75rem;
      height: 3.75rem;
    }

    .zsy_text {
      font-size: 1rem;
      font-weight: bold;
      margin-top: 1.875rem;
    }
  }
  .zsy_li:hover{
    transform: scale(1.2);
  }

  .zsy_li:nth-child(1) {
    left: 28.125rem;
    top: -3.75rem;
  }

  .zsy_li:nth-child(2) {
    left: 39.375rem;
    top: -2.5rem;
  }

  .zsy_li:nth-child(3) {
    left: 50rem;
    top: 1.875rem;
  }

  .zsy_li:nth-child(4) {
    left: 58.125rem;
    top: 10.625rem;
  }

  .zsy_li:nth-child(5) {
    left: 52.5rem;
    top: 21.875rem;
  }

  .zsy_li:nth-child(6) {
    left: 40.625rem;
    top: 27.5rem;
  }

  .zsy_li:nth-child(7) {
    left: 28.125rem;
    top: 30rem;
  }

  .zsy_li:nth-child(8) {
    left: 15rem;
    top: 27.5rem;
  }

  .zsy_li:nth-child(9) {
    left: 3.75rem;
    top: 21.25rem;
  }

  .zsy_li:nth-child(10) {
    left: 0.625rem;
    top: 10.625rem;
  }

  .zsy_li:nth-child(11) {
    left: 6.875rem;
    top: 1.875rem;
  }

  .zsy_li:nth-child(12) {
    left: 17.5rem;
    top: -1.875rem;
  }
</style>